import * as echarts from 'echarts'

export const colorList = [
  {
    gradientStart: '#0073e6', //   渐变
    gradientEnd: '#0073e6' //
  },
  {
    gradientStart: '#04c7e0', //   渐变
    gradientEnd: '#04c7e0' //
  },
  {
    gradientStart: '#01be76', //   渐变
    gradientEnd: '#01be76' //
  },
  {
    gradientStart: '#e0c304', //   渐变
    gradientEnd: '#e0c304' //
  },
  {
    gradientStart: '#eb9100', //   渐变
    gradientEnd: '#eb9100' //
  },
  {
    gradientStart: '#e01e04', //   渐变
    gradientEnd: '#e01e04' //
  },
  {
    gradientStart: '#8e26ff', //   渐变
    gradientEnd: '#aa80ff' //
  },
  {
    gradientStart: '#ae26ff', //   渐变
    gradientEnd: '#af2688' //
  },
  {
    gradientStart: '#a9eb30', //   渐变
    gradientEnd: '#a9eb30' //
  },
  {
    gradientStart: '#ba03c0', //   渐变
    gradientEnd: '#ba03c0' //
  },
  {
    gradientStart: '#36bcf1', //   渐变
    gradientEnd: '#36bcf1' //
  },
  {
    gradientStart: '#f1bf36', //   渐变
    gradientEnd: '#f1bf36' //
  },
  {
    gradientStart: '#a13ca5', //   渐变
    gradientEnd: '#a13ca5' //
  },
  {
    gradientStart: '#30ebb3', //   渐变
    gradientEnd: '#30ebb3' //
  },
  {
    gradientStart: '#558073', //   渐变
    gradientEnd: '#558073' //
  },

  {
    gradientStart: '#a5893c', //   渐变
    gradientEnd: '#a5893c' //
  }
]
// 重点指标-趋势变化-折线图
export const IndexDetailLineChart = (id, data) => {
  // y轴字体颜色
  const Ytextcolor = '#809099'
  // x轴字体颜色
  const Xtextcolor = '#1f2733'
  // y,x轴线颜色
  const Ylinecolor = '#bfbfbf'
  // 内测y,x轴线颜色
  const withinLinecolor = '#e6e6e6'
  //   线段 背景渐变
  const lineColors = [
    {
      line: '#3399ff', //   线段颜色
      gradientStart: 'rgba(146,197,255,0.4)', //   渐变
      gradientEnd: 'rgba(146,197,255,0)' //
    }
  ]

  const option = {
    tooltip: {
      trigger: 'axis',
      // backgroundColor: "#fff",
      backgroundColor: 'rgba(9, 20, 37, 0.75)',
      borderWidth: 1,
      textStyle: {
        fontSize: 14,
        // color: "#999",
        color: '#fff',
        fontFamily: 'PingFang-SC-Medium'
      }
      // formatter: function (params) {
      //   const { value, axisValue } = params[0]

      //   return `<span> ${axisValue}</span><span> ${value} </span><span>${data.unit}</span>`
      // }
    },
    grid: {
      top: '15%',
      left: '5%',
      right: '5%',
      bottom: '8%',
      containLabel: true
    },
    legend: {
      show: true,
      selected: '',
      data: data.legends,
      top: '10%',
      right: '10%',
      textStyle: {
        color: Ytextcolor,
        fontSize: '14',
        fontFamily: 'PingFang-SC-Medium'
      },
      icon: 'rect',
      itemWidth: 12,
      itemHeight: 2
    },
    xAxis: {
      axisTick: {
        show: true,
        inside: true
      },
      axisLabel: {
        show: true,
        interval: 'auto',
        textStyle: {
          color: Xtextcolor
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: Ylinecolor
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: withinLinecolor
        }
      },
      type: 'category',
      boundaryGap: false,
      data: data.xaxis
    },

    yAxis: {
      min: function (value) {
        // 取最小值向下取整为最小刻度
        return Math.floor(value.min)
      },
      max: function (value) {
        // 取最大值向上取整为最大刻度
        return Math.ceil(value.max)
      },
      // name: "车辆数" + "/" + data.unit,
      // name: data.unit || '',
      nameTextStyle: {
        color: Ytextcolor,
        fontSize: 12
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: withinLinecolor
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: Ylinecolor
        },
        interval: 'auto',
        formatter: '{value}(%)'
      },

      axisLabel: {
        // y轴文字的配置
        textStyle: {
          color: Ytextcolor,
          fontSize: 12
        },
        formatter: (val, key) => {
          if (key % 2 == 0) {
            return val
          }
        }
        // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
      }
    },
    series: [
      {
        type: 'line',
        data: data.series,
        name: data.xaxis,
        showAllSymbol: true,
        smooth: true,
        symbol: 'circle',
        symbolSize: 8, // 标记的大小
        itemStyle: {
          normal: {
            color: '#fff', // 拐点颜色
            borderColor: lineColors[0].line,
            borderWidth: 1,
            lineStyle: {
              width: 4,
              shadowColor: 'rgb(0, 0, 0,.16)',
              shadowBlur: 10,
              shadowOffsetY: 10
            }
          },
          emphasis: {
            color: lineColors[0].line,
            borderColor: '#fff',
            borderWidth: 2
          }
        },
        lineStyle: {
          normal: {
            color: lineColors[0].line
          },
          borderColor: lineColors[0].line
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: lineColors[0].gradientStart
            },
            {
              offset: 1,
              color: lineColors[0].gradientEnd
              //   color: "transparent",
            }
          ]),
          borderColor: lineColors[0]
        }
      }
    ]
  }
  const client = document.getElementById(id)
  const myChart = echarts.init(client)
  const clientWidth = client.clientWidth
  myChart.clear()
  myChart.resize({ width: clientWidth })
  myChart.setOption(option)
}

// 重点指标-结构分析-环形图
export const IndexDetailSectorChart = (id, data) => {
  function list(a, b) {
    return a.value - b.value
  }
  data.sort(list).reverse()
  const dataLen = data.length
  let series = [],
    seriestwo = [],
    seriesthree = []
  series = data.slice(0, 3)
  seriestwo = data.slice(3, dataLen)
  seriesthree = data
  const client = document.getElementById(id)
  const myChart = echarts.init(client)
  const clientWidth = client.clientWidth
  const option = {
    tooltip: {
      backgroundColor: 'rgba(9, 20, 37, 0.75)',
      borderColor: '#48607f',
      borderWidth: 1,
      textStyle: {
        fontSize: 14,
        color: '#fff',
        fontFamily: 'PingFang-SC-Medium'
      },
      // padding: [10, 25],
      axisPointer: {
        type: 'none'
      },
      // 将tooltip限制在图标区域内，防止被截断
      confine: true,
      valueFormatter: value => value + '%'
    },
    // grid: {
    //   top: '0%',
    //   left: '0%',
    //   right: '0%',
    //   bottom: '0%'
    // },
    legend: [
      {
        show: false,
        data: series,
        width: 10,
        trigger: 'item',
        type: 'scroll',
        top: '0%',
        right: '0%',
        itemWidth: 8, // 设置icon宽度
        itemHeight: 8, // 设置icon高度
        icon: 'circle',
        itemGap: 10,
        orient: 'vertical',
        textStyle: {
          align: 'left',
          rich: {
            value: {
              fontSize: 14,
              fontFamily: 'DIN-Bold',
              padding: [0, 0, -10, 0],
              color: list => {
                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    // 左、下、右、上
                    offset: 0,
                    color: colorList[list.dataIndex]['gradientStart']
                  },
                  {
                    offset: 1,
                    color: colorList[list.dataIndex]['gradientStart']
                  }
                ])
              }
              // align: 'left'
            },
            rate: {
              fontSize: 14,
              fontFamily: 'DIN-Bold',
              padding: [10, 0, 10, 0],
              color: list => {
                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    // 左、下、右、上
                    offset: 0,
                    color: colorList[list.dataIndex]['gradientStart']
                  },
                  {
                    offset: 1,
                    color: colorList[list.dataIndex]['gradientStart']
                  }
                ])
              }
            },
            rateunit: {
              fontSize: 14,
              padding: [0, 0, 0, 0],
              color: list => {
                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    // 左、下、右、上
                    offset: 0,
                    color: colorList[list.dataIndex]['gradientStart']
                  },
                  {
                    offset: 1,
                    color: colorList[list.dataIndex]['gradientStart']
                  }
                ])
              }
              // align: 'left'
            },
            name: {
              fontSize: 13,
              padding: [40, 0, 0, 0],
              color: list => {
                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    // 左、下、右、上
                    offset: 0,
                    color: colorList[list.dataIndex]['gradientStart']
                  },
                  {
                    offset: 1,
                    color: colorList[list.dataIndex]['gradientStart']
                  }
                ])
              }
              // color: '#000'

              // align: 'left'
            }
          }
        },
        formatter: function (name) {
          let res = {}
          for (let i = 0; i < data.length; i++) {
            if (name == data[i].name) {
              res = {
                name: data[i].name.length > 6 ? data[i].name.substr(0, 6) + '...' : data[i].name,
                value: data[i].value,
                rate: data[i].rate,
                unit: data[i].unit
              }
            }
          }
          return `{name|${res.name}}\n{value|${res.rate}}\n{rate|${res.value}}{rateunit|${res.unit}}`
        },
        // 开启tooltip
        tooltip: {
          show: true
        }
      },
      {
        show: false,
        data: seriestwo,
        trigger: 'item',
        type: 'scroll',
        top: '0%',
        left: '0%',
        align: 'right',
        itemWidth: 8, // 设置icon宽度
        itemHeight: 8, // 设置icon高度
        icon: 'circle',
        itemGap: 10,
        orient: 'vertical',
        textStyle: {
          align: 'right',
          rich: {
            name: {
              fontSize: 13,
              padding: [40, 0, 0, 10],
              color: list => {
                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    // 左、下、右、上
                    offset: 0,
                    color: colorList[list.dataIndex]['gradientStart']
                  },
                  {
                    offset: 1,
                    color: colorList[list.dataIndex]['gradientStart']
                  }
                ])
              },
              align: 'right'
            },
            value: {
              fontSize: 14,
              fontFamily: 'DIN-Bold',
              padding: [0, 0, -10, 0],
              color: list => {
                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    // 左、下、右、上
                    offset: 0,
                    color: colorList[list.dataIndex]['gradientStart']
                  },
                  {
                    offset: 1,
                    color: colorList[list.dataIndex]['gradientStart']
                  }
                ])
              },
              align: 'right'
            },
            rate: {
              fontSize: 14,
              fontFamily: 'DIN-Bold',
              padding: [10, 0, 0, 10],
              align: 'right',
              color: list => {
                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    // 左、下、右、上
                    offset: 0,
                    color: colorList[list.dataIndex]['gradientStart']
                  },
                  {
                    offset: 1,
                    color: colorList[list.dataIndex]['gradientStart']
                  }
                ])
              }
            },
            rateunit: {
              fontSize: 14,
              color: list => {
                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    // 左、下、右、上
                    offset: 0,
                    color: colorList[list.dataIndex]['gradientStart']
                  },
                  {
                    offset: 1,
                    color: colorList[list.dataIndex]['gradientStart']
                  }
                ])
              },
              padding: [0, 0, -10, 0],
              align: 'right'
            }
          }
        },
        formatter: function (name) {
          let res = {}
          for (let i = 0; i < data.length; i++) {
            if (name == data[i].name) {
              res = {
                name: data[i].name.length > 6 ? data[i].name.substr(0, 6) + '...' : data[i].name,
                value: data[i].value,
                rate: data[i].rate,
                unit: data[i].unit
              }
            }
          }
          return `{name|${res.name}}\n{value|${res.rate}}\n{rate|${res.value}}{rateunit|${res.unit}}`
        },
        // 开启tooltip
        tooltip: {
          show: true
        }
      }
    ],
    series: [
      {
        type: 'pie',
        radius: ['30%', '56%'],
        center: ['50%', '50%'],
        label: {
          show: false,
          position: 'center',
          color: '#fff',
          fontSize: 20
        },
        itemStyle: {
          borderWidth: 2,
          borderColor: '#f2f6fa',

          color: list => {
            return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                // 左、下、右、上
                offset: 0,
                color: colorList[list.dataIndex]['gradientStart']
              },
              {
                offset: 1,
                color: colorList[list.dataIndex]['gradientStart']
              }
            ])
          }
        },
        labelLine: {
          show: false
        },
        data: seriesthree
      },
      {
        type: 'pie',
        radius: ['30%', '42%'],
        center: ['50%', '50%'],
        z: 100000,
        emptyCircleStyle: {
          color: 'rgba(0,0,0,0.2)'
        }
      }
    ]
  }
  myChart.clear()
  myChart.resize({ width: clientWidth })
  myChart.setOption(option)
}

// 重点指标-国家重点资源管控-变化趋势-预测折线图
export const IndexDetailPredictLineChart = (id, dataJson, lineColors) => {
  const data = JSON.parse(JSON.stringify(dataJson))
  const realLen = data.real.xaxis.length
  let echartData = {}
  if (data.prediction) {
    data.prediction.series.forEach(val => {
      const colorIndex = lineColors.findIndex(i => i.name == val.label)
      val.data.unshift(data.real.series[0].data[realLen - 1])
      for (let i = 0; i < realLen - 1; i++) {
        val.data.unshift(null)
      }
      val.lineWidth = 1
      val.lineType = 'dashed'
      val.lineColor = lineColors[colorIndex].color
    })

    echartData = {
      xaxis: [...data.real.xaxis, ...data.prediction.xaxis],
      series: [...data.real.series, ...data.prediction.series],
      unit: data.real.unit
    }
  } else {
    echartData = data.real
  }
  // y轴字体颜色
  const Ytextcolor = '#666'
  // x轴字体颜色
  const Xtextcolor = '#666'
  // y,x轴线颜色
  const Ylinecolor = '#bfbfbf'
  // 内测y,x轴线颜色
  const withinLinecolor = 'rgba(0,0,0,0.1)'

  const option = {
    tooltip: {
      trigger: 'axis',
      // backgroundColor: "#fff",
      backgroundColor: 'rgba(9, 20, 37, 0.75)',
      borderWidth: 1,
      textStyle: {
        fontSize: 14,
        // color: "#999",
        color: '#fff',
        fontFamily: 'PingFang-SC-Medium'
      },
      formatter: function (params) {
        let returnData = ''
        returnData = '<span>' + params[0].axisValue + '</span>' + '</br>'
        const realX = data.real.xaxis[realLen - 1]

        for (let i = 0; i < params.length; i++) {
          const colorIndex = lineColors.findIndex(c => c.name == params[i].seriesName)
          if (params[i].seriesName != '' && params[i].value) {
            const indexColor = colorIndex >= 0 ? lineColors[colorIndex].color : '#3990E7'
            returnData +=
              '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background:' +
              indexColor +
              '"></span>'
            returnData += params[i].seriesName + ': ' + params[i].value + echartData.unit + '</br>'
          }
          if (realX == params[i].axisValue) {
            return returnData
          }
        }
        return returnData
      }
    },
    grid: {
      top: '3%',
      left: '5%',
      right: '5%',
      bottom: '8%',
      containLabel: true
    },
    xAxis: {
      show: true,
      boundaryGap: false,
      type: 'category',
      axisTick: {
        // 轴刻度
        show: false
      },
      axisLabel: {
        // 轴文字
        show: true,
        color: Xtextcolor,
        fontSize: 12
        // interval: 0,
      },
      axisLine: {
        // 坐标轴线
        show: true,
        lineStyle: { color: Ylinecolor }
      },
      data: echartData.xaxis
    },

    yAxis: {
      type: 'value',
      nameTextStyle: {
        color: Ytextcolor,
        fontSize: 12
      },
      min: function (value) {
        // 取最小值向下取整为最小刻度
        return Math.floor(value.min) - 1
      },
      max: function (value) {
        // 取最大值向上取整为最大刻度
        return Math.ceil(value.max)
      },
      axisTick: {
        // 轴刻度
        show: false
      },
      splitLine: {
        // 网格线
        show: true,
        lineStyle: {
          // 分割线
          color: withinLinecolor,
          type: 'dashed',
          width: 1
        }
      },
      axisLabel: {
        // 轴文字
        show: true,
        color: Ytextcolor,
        fontSize: 11
      },
      axisLine: {
        // 轴线
        show: true,
        lineStyle: { color: Ylinecolor }
      }
    },
    series: []
  }
  echartData.series.forEach(ele => {
    option.series.push({
      name: ele.label,
      data: ele.data,
      connectNulls: true,
      showSymbol: false,
      type: 'line',
      lineStyle: {
        width: ele.lineWidth ? ele.lineWidth : 2,
        type: ele.lineType ? ele.lineType : 'solid',
        color: ele.lineColor ? ele.lineColor : '#3990E7'
      }
    })
  })
  const client = document.getElementById(id)
  const myChart = echarts.init(client)
  const clientWidth = client.clientWidth
  myChart.clear()
  myChart.resize({ width: clientWidth })
  myChart.setOption(option)
}

// 结构分析 柱状图
export const IndexDetailSectorBarChart = (id, data) => {
  data = data ? data : {}
  // y轴字体颜色
  const Ytextcolor = '#809099'
  // x轴字体颜色
  const Xtextcolor = '#1f2733'
  // y,x轴线颜色
  const Ylinecolor = '#bfbfbf'
  // 内测y,x轴线颜色
  const withinLinecolor = '#e6e6e6'
  //   线段 背景渐变
  const lineColors = {
    //   线段颜色
    gradientStart: '#66bfff', //   渐变
    gradientEnd: '#2681ff' //
  }

  const option = {
    tooltip: {
      trigger: 'axis',
      // backgroundColor: "#fff",
      backgroundColor: 'rgba(9, 20, 37, 0.75)',
      borderWidth: 1,
      textStyle: {
        fontSize: 14,
        // color: "#999",
        color: '#fff',
        fontFamily: 'PingFang-SC-Medium'
      },
      formatter: function (params) {
        const { value, axisValue } = params[0]

        return `<span> ${axisValue}</span><span> ${value} </span><span>${data.unit || ''}</span>`
      }
    },
    grid: {
      top: '8%',
      left: '2%',
      right: '5%',
      bottom: '5%',
      containLabel: true
    },
    legend: {
      show: true,
      selected: '',
      data: data.legends,
      top: '10%',
      right: '10%',
      textStyle: {
        color: Ytextcolor,
        fontSize: '14',
        fontFamily: 'PingFang-SC-Medium'
      },
      icon: 'rect',
      itemWidth: 12,
      itemHeight: 2
    },
    xAxis: {
      axisTick: {
        show: true,
        inside: true
      },
      axisLabel: {
        show: true,
        interval: 'auto',
        textStyle: {
          color: Xtextcolor
        }
      },
      axisPointer: {
        show: true,
        type: 'line',
        lineStyle: {
          color: {
            type: 'line',
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgb(61, 118, 204, 0.1)' // 100% 处的颜色
              },
              {
                offset: 1,
                color: 'rgb(61, 118, 204, 0.1)' // 0% 处的颜色  #000613','#00334f', '#77f0ff'
              }
            ]
          },
          type: 'solid',
          width: 40
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: Ylinecolor
        }
      },
      splitLine: {
        show: true,
        interval: 0,
        lineStyle: {
          type: 'dashed',
          color: withinLinecolor
        }
      },
      // type: "category",
      // boundaryGap: false,
      data: data.xaxis || data.xAxis.data
    },

    yAxis: {
      min: function (value) {
        // 取最小值向下取整为最小刻度
        return Math.floor(value.min)
      },
      max: function (value) {
        // 取最大值向上取整为最大刻度
        return Math.ceil(value.max)
      },
      // name: "车辆数" + "/" + data.unit,
      name: data.unit || '',
      nameTextStyle: {
        color: Ytextcolor,
        fontSize: 12
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: withinLinecolor
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: Ylinecolor
        },
        interval: 'auto',
        formatter: '{value}(%)'
      },

      axisLabel: {
        // y轴文字的配置
        textStyle: {
          color: Ytextcolor,
          fontSize: 12
        },
        formatter: (val, key) => {
          if (key % 2 == 0) {
            return val
          }
        }
        // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
      }
    },
    series: data.series.map(s => {
      const sType = s.type
      return {
        type: sType,
        data: s.data,
        name: data.xAxis.data,
        showAllSymbol: true,
        barWidth: '16px',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: lineColors.gradientStart
            },
            {
              offset: 1,
              color: lineColors.gradientEnd
            }
          ])
        }
      }
    })
  }
  const client = document.getElementById(id)
  const myChart = echarts.init(client)
  const clientWidth = client.clientWidth
  myChart.clear()
  myChart.resize({ width: clientWidth })
  myChart.setOption(option)
}
